Center div content

Flexbox

Center <div> vertically and horizontally with Flexbox layout using Tailwind

<div class="flex justify-center items-center w-full h-screen">
	<p>center</p>
</div>

or CSS

div {	
	display: flex;
	justify-content: center;
	align-items: center;
}

Grid

Center <div> vertically and horizontally with Grid layout using Tailwind

<div class="grid place-content-center w-full h-screen">
  <p>center</p>
</div>

or CSS

div {
	display: grid;
	place-items: center;
}

Absolute/relative position

Center <div> content with relative and absolute positioning using Tailwind

<div class="relative w-full h-screen">
  <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">center</p>
</div>

or CSS

div {
	position: relative;
}

p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}